<template>
	<view class="p-top20" :style="{'--color': color}">
		<view class="shopinfo">
			<view class="shopTxt">
				<image :src="$imgUrls(shops.logo)" mode="aspectFill" class="logo"></image>
				<view class="shop_content">
					<view class="d-flex" v-if="shops.name">
						<text class="color_33 size28">{{shops.name}}</text>
					</view>
					<text class="row color_33 size28 m-top10">{{shops.v_name}}</text>
					<text class="row color_33 size26 m-top10">{{shops.v_tel}}</text>
				</view>
			</view>
			<view class="row j-sb a-center m-top30">
				<view class="lis">
					<text class="lis_num">{{shops.orderCount}}</text>
					<text class="lis_txt">总单量</text>
				</view>
				<view class="lis">
					<text class="lis_num">{{shops.payment}}</text>
					<text class="lis_txt">交易额</text>
				</view>
				<view class="lis">
					<text class="lis_num">{{shops.income}}</text>
					<text class="lis_txt">总收益</text>
				</view>

				<!-- <view class="lis" @click="toUrl(`/privatePage/client/myClient`)">
						<text class="lis_num">{{shops.guest_num}}</text>
						<text class="lis_txt">客户数</text>
					</view> -->


				<view class="lis" @click="toUrl(`/privatePage/client/myClient`)">
					<text class="lis_num">{{shops.guest_num}}</text>
					<view class="d-flex a-center">
						<text class="lis_txt">客户数</text>
						<view class="iconfont icon-xiangyouxiayiye color_33 h6 p-left10 p-top10"></view>
					</view>
				</view>

			</view>
		</view>


		<view class="viewbox auto d-flex j-end  p-top20 p-bot20">
			<view class="d-flex a-center" @click.stop="show = true">
				<text class="size30 color_33 m-right10">{{yearMonth}}</text>
				<view class="iconfont icon-xiasanjiaoxing color_33 size28"></view>
			</view>
		</view>

		<view class="Navs">
			<text class="NavNum">{{orderData.month}}</text>
			<text class="white size26">当月收入 ￥{{orderData.money}}</text>
		</view>

		<view class="viewbox auto" v-for="(item,index) in orderData.distributions" :key="index">
			<view class="Time">{{item.time}}</view>
			<view class="order_list" v-for="(sItem,sIndex) in item.list" :key="sIndex">
				<view class="flex-1 d-flex f-column">
					<text class="lititle">订单号：{{sItem.order_code}}</text>
					<text class="lititle">金额：￥{{sItem.total_money}}</text>
					<text class="lititle">店铺：{{sItem.store_name}}</text>
					<text class="lititle">下单时间：{{sItem.add_date}}</text>
				</view>
				<view class="d-flex f-column a-center">
					<text class="color size26">收益</text>
					<text class="color_ff2 size30 m-top8">￥{{sItem.money}}</text>
				</view>
			</view>
		</view>


		<emptys v-if="!orderData.distributions" title="暂无相关信息"></emptys>

		<u-datetime-picker :show="show" v-model="value1" :maxDate="Date.now()" mode="year-month" @cancel="show = false"
			@confirm="confirm">
		</u-datetime-picker>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				shops: '',
				show: false,
				value1: Number(new Date()),
				yearMonth: '',
				orderData: ''
			}
		},
		onLoad() {
			this.getDealerShopDetail()
		},
		onShow() {
			const date = new Date()
			const year = date.getFullYear()
			const month = (date.getMonth() + 1).toString().padStart(2, '0')
			this.yearMonth = `${year}.${month}`
		},
		methods: {
			getDealerShopDetail() {
				this.$http.get({
					url: '/WokersApi/getDealerShopDetail',
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg)
					const result = res.data
					this.shops = result
					this.getDealerIncome()
				})
			},
			getDealerIncome() {
				const year_month = this.yearMonth.split('.')
				this.$http.get({
					url: '/WokersApi/getDealerIncome',
					data: {
						year: year_month[0],
						month: year_month[1],
						shop_id: this.shops.shop_id
					}
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg)
					const result = res.data
					this.orderData = result
				})
			},
			confirm(event) {
				const val = event.value;
				const year_month = this.$pop.Timestamp(val)
				this.yearMonth = year_month
				this.show = false
				this.getDealerIncome()

			}
		},
		computed: {
			...mapState(['color', 'position'])
		},
	}
</script>

<style lang="scss" scoped>
	.shopinfo {
		width: 690rpx;
		margin: 0 auto;
		padding: 30rpx;
		background-color: #f2f2f2;
		border-radius: 6rpx;
		display: flex;
		flex-direction: column;
	}

	.shopTxt {
		width: 100%;
		display: flex;
	}

	.logo {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.shop_content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.bussName {
		background-color: var(--color);
		padding: 2rpx 10rpx;
		color: #fff;
		font-size: 22rpx;
		margin-right: 10rpx;
	}

	.lis {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.lis_num {
		color: #000;
		font-size: 28rpx;
	}

	.lis_txt {
		color: #000;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.Navs {
		width: 690rpx;
		height: 80rpx;
		background-color: #999999;
		margin: 0 auto;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.NavNum {
		font-size: 80rpx;
		font-weight: bold;
		margin-top: -75rpx;
	}

	.Time {
		display: inline-block;
		padding: 6rpx 20rpx;
		color: #000;
		font-size: 28rpx;
		font-weight: bold;
		background-color: #d7d7d7;
		margin-top: 20rpx;
	}

	.order_list {
		width: 100%;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #f2f2f2;
	}

	.lititle {
		font-size: 26rpx;
		color: #333;
		padding: 4rpx 0;
	}
</style>